<template>
  <div>
    <el-card>
      <el-table
        :data="tableInfo"
        style="width: 100%"
      >
        <el-table-column
          prop="number"
          label="试题编号"
          width="130"
        />
        <el-table-column
          prop="subject"
          label="学科"
          width="80"
        />
        <el-table-column
          prop="catalog"
          label="目录"
          width="80"
        />
        <el-table-column
          prop="questionType"
          label="题型"
          :formatter="questionTypefn"
          width="80"
        />
        <el-table-column
          prop="question"
          label="题干"
          width="180"
        >
          <template v-slot="scope">
            <div v-html="scope.row.question" />
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          width="150"
        >
          <template v-slot="scope">
            {{ scope.row.addDate | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          :formatter="difficultyFn"
          width="100"
        />
        <el-table-column
          prop="creatorID"
          label="录入人"
          :formatter="creatorFn"
          width="80"
        />
        <el-table-column
          prop="chkState"
          label="审核状态"
          :formatter="chkStateFn"
          width="80"
        />
        <el-table-column
          prop="chkRemarks"
          label="审核意见"
          width="100"
        />
        <el-table-column
          prop="chkUser"
          label="审核人"
          width="100"
        />
        <el-table-column
          prop="publishState"
          label="发布状态"
          :formatter="publishStateFn"
          width="100"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="180"
        >
          <template v-slot="scope">
            <el-row type="flex" justify="start">
              <el-button type="text" size="small" @click="onPreview(scope.row.id)">预览</el-button>
              <el-button :disabled="scope.row.chkState!==0" type="text" size="small" @click="onCheck(scope.row.id)">审核</el-button>
              <el-button :disabled="scope.row.publishState==1" type="text" size="small" @click="jumptonew(scope.row.id)">修改</el-button>
              <el-button v-if="scope.row.publishState==0" type="text" size="small" @click="onPublish(scope.row.id,scope.row.publishState)">上架</el-button>
              <el-button v-if="scope.row.publishState==1" type="text" size="small" @click="offPublish(scope.row.id)">下架</el-button>
              <el-button type="text" size="small" @click="delQuestion(scope.row.id)">删除</el-button>
            </el-row>

          </template>

        </el-table-column>
      </el-table>

      <el-row type="flex" justify="end">
        <el-pagination
          :current-page="page.page"
          :page-sizes="[2,3,4,5]"
          :page-size="page.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>

    </el-card>

    <!-- 预览弹层 -->
    <el-dialog
      title="题目预览"
      :visible.sync="show"
      width="180"
    >
      <div class="topPreview">
        <el-row style="margin-bottom:20px">
          <span style="margin-right:90px">【题型】:{{ curQuestion.questionType }} </span>
          <span style="margin-right:90px">【编号】:{{ curQuestion.id }}</span>
          <span style="margin-right:90px">【难度】:{{ curQuestion.difficulty }}</span>
          <span style="margin-right:90px">【标签】:{{ curQuestion.tags }}</span>
        </el-row>
        <el-row style="margin-bottom:20px">
          <span style="margin-right:90px">【学科】:{{ curQuestion.subject }}</span>
          <span style="margin-right:90px">【目录】:{{ curQuestion.catalog }}</span>
          <span style="margin-right:90px">【方向】:{{ curQuestion.direction }}</span>
        </el-row>
        <hr>
        <el-row>
          <span>【题干】:</span>
          <div v-html="curQuestion.question" />
          <div v-if="curQuestion.questionType==1">单选题选项:(以下选中的选项为正确答案)</div>
          <div v-if="curQuestion.questionType==2">多选题选项:(以下选中的选项为正确答案)</div>
          <div v-if="curQuestion.questionType==3">简答题:</div>
          <!-- 单选题 -->
          <div v-if="curQuestion.questionType==1" style="margin-top:10px">
            <el-radio-group v-model="radio">
              <el-radio v-for="item,index in options" :key="index" style="display:block;margin-bottom:10px" :label="item.code">{{ item.title }}</el-radio>
            </el-radio-group>
          </div>
          <!-- 多选题 -->
          <div v-if="curQuestion.questionType==2" style="margin-top:10px">
            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="item,index in options" :key="index" style="display:block;margin-bottom:10px" :label="item.code" />
            </el-checkbox-group>
          </div>
        <!-- 简答 -->
        </el-row>
        <hr>
        <el-row>
          <span>【参考答案】:</span> <el-button type="danger" size="medium" @click="toVideoURL">视频答案解析</el-button>
          <div style="width:350px;height:250px;margin-top:10px">
            <meta name="referrer" content="never">
            <video autoplay style="width:100%;height:100%" :src="videoUrl" />
          </div>
        </el-row>
        <hr>
        <el-row style="margin-bottom:20px;margin-top:20px">
          <span>【答案解析】:</span>
          <span v-html="curQuestion.answer" />
        </el-row>
        <hr>
        <el-row>
          <span>【题目备注】:</span>
          <span>{{ curQuestion.remarks }}</span>
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 审核弹层 -->
    <el-dialog
      title="题目审核"
      :visible.sync="showcheck"
      width="30%"
    >
      <el-row style="margin-bottom:20px">
        <el-radio v-model="radioCheck" label="1" @input="checkchange">通过</el-radio>
        <el-radio v-model="radioCheck" label="2" @input="checkchange">拒绝</el-radio>
      </el-row>
      <el-input
        v-model="textarea"
        type="textarea"
        :rows="2"
        placeholder="请输入审核意见"
      />
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="showcheck = false">取 消</el-button>
        <el-button type="primary" size="small" @click="checkconfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

    <script >
    import { getDetailQustion, getPublished, delBasicQustion, getCheckOpinion,getSeclectedQustion } from '@/api/question/index'
    import numTowords from '@/views/question/numTowords'
    export default {
    props: {
            questionList: {
            type: Array
            }
    },
        data() {
          return {
              show: false,
                tableInfo: [],
                page: {
                  page: 1,
                  pagesize: 5,
                  total: 0
              },
              curQuestion: {},
              flag: false,
            mytable: 0,
            
            videoUrl: '',
            showdialog: '',
            options: [],
            radio: '',
            checkList: [],
            dialogVisibleSon: false,

            showcheck: false,
            radioCheck: '1',
            textarea: '',
            checkOpinion: {}

            }
        },
    watch: {
        questionList: {
            deep: true,
            immediate: true,
            handler(newval, oldval) {
                console.log(newval)
                this.tableInfo = newval
            }
      },
      options(newval, oldval) {
      if (newval) {
        if (this.curQuestion.questionType == 1) {
          newval.forEach(item => {
      if (item.isRight == 1) {
          this.radio = item.code
        }
    })
        }
        // 多选
        else if (this.curQuestion.questionType == 2) {
          newval.forEach(item => {
      if (item.isRight == 1) {
          this.checkList.push(item.code)
        }
    })
        }
      }
      },
      mytable(newval, oldval) {
        this.mytable=newval
      }
        },
   created() {
    this.tableInfo = this.questionList
    this.getSeclectedQustion(this.page)
  },
  updated() {
    console.log(this.curQuestion, '00000000000000')
    this.options = this.curQuestion.options
    },
  methods: {
    handleSizeChange(num) {
      this.page.pagesize = num
      this.getSeclectedQustion(this.page)
    },
    handleCurrentChange(num) {
      this.page.page = num
      this.getSeclectedQustion(this.page)
    },
       // 精选题库列表
     async  getSeclectedQustion(data) {
      const res = await getSeclectedQustion(data)
      console.log('精选题库列表', res)
      this.tableInfo = res.items
      this.page.total = res.counts
    },
      // 打开预览弹层
     async onPreview(id) {
        // console.log(id)
        this.show = true
       await this.getDetailQustion(id)
        console.log(this.curQuestion, '999999999999999')
      //   this.$emit('showpreview', this.curQuestion)
      },
      // 打开审批弹层
      onCheck(id) {
        this.showcheck = true
        this.getDetailQustion(id)
        // console.log(this.$parent.$parent.$parent.$parent.renderList, '777777777777777777')
      },
       // 审批确认
      checkconfirm(id) {
        // 将状态修改至后台？
        this.curQuestion.chkState = this.curcheck ? this.curcheck : '1'
         console.log(this.curQuestion.chkState, '当前题目审核意见')
        //  this.$parent.$parent.$parent.$parent.renderList(this.mytable)
        this.getCheckOpinion(id)
        console.log('审批意见发送成功')
        this.$emit('onCheck', this.mytable)
        this.showcheck = false
    },
     async getDetailQustion(id) {
       const res = await getDetailQustion(id)
       console.log('当前点击题目详情', res)
        this.curQuestion = res
      },
      // 删除题目
      async delBasicQustion(id) {
        await delBasicQustion(id)
      },
      // 精选题库上下架
     async getPublished(data) {
        await getPublished(data)
      },
      // 审批意见
      async getCheckOpinion(id) {
        await getCheckOpinion(id)
      },

    // 上架
      onPublish(id, publishState) {
        console.log(id, publishState)
        this.getPublished({ id: id, publishState: 1 })
        console.log(this.mytable,'0-0-0-0-0-0-0-0-0-0-')
        this.$emit('onPublish', this.mytable)
      },
    // 下架
      offPublish(id) {
        console.log(id)
        this.getPublished({ id: id, publishState: 0 })
        console.log(this.mytable,'0-0-0-0-0-0-0-0-0-0-')
        this.$emit('offPublish', this.mytable)
      },
    // 删除题目
      delQuestion(id) {
        this.$confirm('确认删除吗？')
        this.delBasicQustion(id)
        this.$emit('delQ', this.mytable)
      },
    // 跳转到录入
      jumptonew(id) {
        this.$router.push({
          path: '/question/new',
          query: {
            id: id
          }
        })
    },
    // 审核状态
      chkStateFn(row, column, cellValue, index) {
        const obj = numTowords.chkState.find((item) => {
       return item.id === cellValue
    })
      return obj ? obj.value : '未知'
      },
    // 发布状态
      publishStateFn(row, column, cellValue, index) {
        const obj = numTowords.publishState.find((item) => {
       return item.id === cellValue
    })
      return obj ? obj.value : '未知'
      },
    // 难度
    difficultyFn(row, column, cellValue, index) {
        const obj = numTowords.difficulty.find((item) => {
       return item.id === cellValue
    })
      return obj ? obj.value : '未知'
      },
        // 题型
    questionTypefn(row, column, cellValue, index) {
        const obj = numTowords.questionType.find((item) => {
       return item.id === cellValue
    })
      return obj ? obj.value : '未知'
      },
      toVideoURL() {
        this.videoUrl = this.curQuestion.videoURL
        // console.log(this.videoUrl)
      },
      checkchange(val) {
        console.log(val, '---------------')
        this.curcheck = val
      },
      // 录入人
      creatorFn(row, column, cellValue, index) {
        const obj = numTowords.creator.find((item) => {
       return item.id === cellValue
    })
      return obj ? obj.value : '其他'
      }

    }
    }

    </script>

<style lang="scss">
.el-dialog__wrapper {
     .el-dialog {
     overflow: hidden;
     border-radius: 10px;
     .el-dialog__header {
     background: #409eff;
     .el-dialog__title {
     color: white;
     }
     .el-icon-close::before {
     color: white;
     }
     }
    }
    }
</style>